<template>
	<view class="page">
		<navHead :datas="headData"></navHead>
		<view class="content_box pd-30">
			<view class="ft-28 c-33 fw-800">请添加您的银行信息</view>
			<view class="form-box mt-30">
				<view class="form-item pd-20">
					<view class="flex-bwt">
						<view class="l ft fw-800"><text class="c-red">*</text> 持卡人姓名<text
								class="c-99 fw-400">（必填）</text></view>
						<view class="r ft-22 c-red" v-if="form.is_sub == 1 && !form.name">还没有输入姓名</view>
					</view>
					<input class="ft-24 c-66 mt-10" v-model="form.name" placeholder-style="color:#999999;"
						placeholder="请输入" />
				</view>
				<view class="form-item pd-20 mt-20">
					<view class="flex-bwt">
						<view class="l ft fw-800"><text class="c-red">*</text> 银行卡号<text class="c-99 fw-400">（必填）</text>
						</view>
						<view class="r ft-22 c-red" v-if="form.is_sub == 1 && !form.bank_num">卡号不完整，请检查后并输入完整卡号</view>
					</view>
					<input class="ft-24 c-66 mt-10" v-model="form.bank_num" @input="handleInput"
						placeholder-style="color:#999999;" placeholder="请输入" @blur="getBankType" />
					<view class="bank-btn mt-20 pd-10" @click="getBankType">识别</view>
					<view class="branch_box">
						<view class="flex-bwt">
							<view class="l ft fw-800 c-99"> 开户行</view>
						</view>
						<input class="ft-24 c-66 mt-10" v-model="form.bank_type_name" disabled
							placeholder-style="color:#999999;" placeholder="未输入银行卡号" />
					</view>
				</view>

				<view class="form-item pd-20 mt-20">
					<view class="flex-bwt">
						<view class="l ft fw-800"><text class="c-red">*</text> 开户支行<text class="c-99 fw-400">（必填）</text>
						</view>
						<view class="r ft-22 c-red" v-if="form.is_sub == 1 && !form.bank_branch">还没有输入开户支行名称，或输入错误
						</view>
					</view>
					<input class="ft-24 c-66 mt-10" v-model="form.bank_branch" placeholder-style="color:#999999;"
						placeholder="请输入" />
				</view>
			</view>
		</view>
		<view class="btn_box flex-center">
			<view class="btn bd-r20" @click="submitInfo">保存</view>
		</view>
	</view>
</template>

<script setup lang="js">
import {
	ref,
	reactive,
	nextTick
} from 'vue';
import dialogPop from '@/components/dialogPop.vue';
import navHead from '@/components/navHead.vue';
import CustomSwitch from '@/components/comSwith.vue'
import {
	onLoad
} from '@dcloudio/uni-app';
import {
	utils
} from '@/utils/utils.js';
import {
	api
} from '@/utils/api.js';


let headData = reactive({
	color: '#fff',
	title: '添加银行卡'
})
const form = ref({
	is_sub: 0,
	name: '',
	bank_num: '',
	bank_type_id: '',
	bank_type_name: '',
	bank_branch: '',
})
const handleInput = (e) => {
	nextTick(() => {
		form.value.bank_num = e.detail.value.replace(/[^a-zA-Z0-9]/g, '')
	})
}
const submitInfo = () => {
	form.value.is_sub = 1

	var formData = {
		is_sub: 1,
		id: id.value,
		name: form.value.name,
		bank_num: form.value.bank_num,
		bank_type_id: form.value.bank_type_id,
		bank_branch: form.value.bank_branch,
	}
	utils
		.request(
			api.editBank, formData,
			"post"
		)
		.then((res) => {
			uni.showToast({
				title: '操作成功',
				icon: 'none',
				duration: 2000
			})
			setTimeout(() => {
				getApp().globalData.shouldRefresh = true;
				uni.navigateBack()
			}, 2000)
		});

}

const getBankType = () => {
	utils
		.request(
			api.getBankNumType, { bank_num: form.value.bank_num },
			"post"
		)
		.then((res) => {
			form.value.bank_type_id = res.data.id
			form.value.bank_type_name = res.data.name
		});
}

const id = ref('')
onLoad((option) => {
	id.value = option?.id || ''
	if (id.value) {
		headData.title = '编辑银行卡'
	}
	if (id.value) {
		utils
			.request(
				api.editBank, {
				id: id.value
			},
				"post"
			)
			.then((res) => {
				var resData = res.data.info

				form.value.name = resData.name
				form.value.bank_num = resData.bank_num
				form.value.bank_type_id = resData.bank_type_id
				form.value.bank_branch = resData.bank_branch
				form.value.bank_type_name = resData.bank_type.name

			});
	}
})

</script>

<style lang="scss" scoped>
.form-box {
	.form-item {
		width: 690rpx;
		background: #F8F8F8;
		border-radius: 20rpx;

		.branch_box {
			border-top: 4rpx dashed #ebebeb;
			padding-top: 15rpx;
			margin-top: 15rpx;
		}

		.bank-btn {
			width: 650rpx;
			background: #F1F1F1;
			border-radius: 20rpx;
			text-align: center;
			font-size: 24rpx;
			color: #666666;
		}
	}
}

.btn_box {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	display: flex;
	align-items: start;
	justify-content: flex-end;
	background-color: #F8F8F8;
	box-sizing: border-box;
	padding: 10rpx 30rpx;
	padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
	box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);

	.btn {
		width: 100%;
		height: 78rpx;
		line-height: 78rpx;
		text-align: center;
		background-color: #333;
		color: #DBF046;
	}
}
</style>